<template>
  <div style="height: 100%">
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: {},
      charts: '',
      xAngleList: [],
      yList1: [],
      yList2: [],
      xList: [],
      timerList: [],
      // 监测点名称
      monitorName: '',
      pieData: [],
      legendData: [],
      count: 100,
    }
  },
  computed: {
    options() {
      var that = this
      const Echarts = require('echarts')
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        animationDuration: 2000, // 动画时长 可以接受 回调函数
        title: {
          text: this.monitorName,
          x: 'center',
          top: 20
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 30 // 可以根据实际情况调整
          }
        ],
        xAxis: [
          {
            type: 'category',
            data: this.xList,
            axisLabel:{
              rotate:40
            },
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        legend: {
          padding: [0, 20, 0, 20],
          // 设置为可滚动的图例
          orient: 'vertical',
          top: 'center',
          right: '0',
          icon: 'circle',
          data: this.legendData,
          textstyle: {
            rich: {
              name: {
                fontsize: 20,
                align: 'left',
                padding: [20, 0, 20, 20],
                lineHeight: 40,
                width: 180
              },
              value: {
                fontsize: 20,
                align: 'right',
                padding: [20, 0, 20, 20]
              },
              percentage: {
                fontsize: 20,
                align: 'right',
                padding: [20, 0, 20, 20]
              }
            }
          }
        }
        ,
        series: [
          {
            name: '总数',
            type: 'bar',
            barGap:'-100%',
            emphasis: {
              focus: 'series'
            },
            barWidth:'60%',
            data: this.yList1,
            label: {
              show: true,
              formatter: (params) => '总数:'+params.value
            },
          },
          {
            name: '修复完成',
            type: 'bar',
            barGap:'-100%',
            emphasis: {
              focus: 'series'
            },
            barWidth:'60%',
            data: this.yList2,
            label: {
              show: true,
              formatter: (params) =>{
                if(params.value == 0){
                  return ''
                }else{
                  return '修复完成:'+params.value
                }
              }
            },
          },
        ],
      }
    }
    ,
  },

  methods: {
    initEcharts() {
      if (this.charts) {
        this.charts.dispose()
        this.charts = undefined
      }
      const Echarts = require('echarts')
      this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
      var _this = this
      this.charts.on('mouseout', params => {
      })
      this.$nextTick(() => {
        this.charts.showLoading({
          text: '久感科技为你服务', //显示的文本
          color: '#c23531', //显示转圈的圆圈颜色
          textCloor: '#000', //显示文本的颜色
          maskColor: 'rgba(255,255,255,0.8)', //显示的背景色
          // 字体大小。从 `v4.8.0` 开始支持。
          fontSize: 32,
          // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
          showSpinner: true,
          // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
          spinnerRadius: 14,
          // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
          lineWidth: 5,
          // 字体粗细。从 `v5.0.1` 开始支持。
          fontWeight: 'normal',
          // 字体风格。从 `v5.0.1` 开始支持。
          fontStyle: 'normal',
          // 字体系列。从 `v5.0.1` 开始支持。
          fontFamily: 'sans-serif'
        })

      })
    }
    ,
    updateEchart(yList1,yList2,xList, name) {
      this.yList1 = yList1
      this.yList2 = yList2
      this.xList = xList
      this.monitorName = name
      this.legendData = xList
      this.initEcharts()
      this.charts.setOption(this.options)
      this.$nextTick(() => {
        this.charts.hideLoading()
      })

      this.charts.resize()
    }
    ,
  }
  ,
}
</script>
<style>
.formaterUl li {
  margin-bottom: 5px;
}
</style>
